<template>
  <div class="app-container">
    <!-- <span class="title">集体申请与审核</span>
    <el-divider></el-divider> -->
    <div class="filter-container">
      <el-form inline>
        <el-form-item label="集体名称">
          <el-input v-model="listQuery.applicantName" placeholder="集体名称" />
        </el-form-item>
        <el-form-item label="代表人">
          <el-input v-model="listQuery.representName" placeholder="代表人" />
        </el-form-item>
        <el-form-item label=" 代表人身份证号">
          <el-input v-model="listQuery.representNum" placeholder="代表人身份证号" />
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select placeholder="证件类型" v-model="listQuery.certificateTypeId" clearable>
            <!-- <el-option label="区县级" value="DISTRICT" />
            <el-option label="市级" value="CITY" />-->
            <el-option v-for="(item,index) in fukenList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="状态" v-model="listQuery.landAuditStatus">
            <!-- <el-option label="区县级" value="DISTRICT" /> -->
            <!-- <el-option label="市级" value="CITY" /> -->
            <el-option v-for="(item,index) in shenChaList" :key="index" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="changePage(1)" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="filter-container">
      <router-link :to="{ path: '/project/groupApplyCheck/add' }">
        <el-button class="filter-item" type="primary" icon="el-icon-plus">添加</el-button>
      </router-link>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="加载中" highlight-current-row>
      <el-table-column type="index" label="序号" fixed></el-table-column>
      <el-table-column show-overflow-tooltip prop="applyNum" label="申请编号" width="160"></el-table-column>
      <el-table-column show-overflow-tooltip prop="applicantName" label="集体名称" width="160"></el-table-column>
      <el-table-column show-overflow-tooltip prop="representName" label="代表人" width="120"></el-table-column>
      <el-table-column show-overflow-tooltip prop="representNum" label="代表人身份证" width="220"></el-table-column>
      <el-table-column show-overflow-tooltip prop="address" label="通讯地址" width="260"></el-table-column>
      <el-table-column show-overflow-tooltip prop="mobilePhone" label="手机号码" width="160"></el-table-column>
      <el-table-column show-overflow-tooltip prop="certificateNum" label="证件号码" width="160"></el-table-column>
      <el-table-column show-overflow-tooltip label="证件类型" width="160">
        <template slot-scope="scope">
          <span>{{scope.row.certificateType.name}}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="auditStatus" label="复垦类型" width="160"></el-table-column>
      <el-table-column label="操作" fixed="right" width="230">
        <template slot-scope="scope">
          <router-link :to="{ name: '集体申请详情', query: { id: scope.row.landId } }">
            <el-button size="small" style="margin-right: 5px;" type="primary">申请详情</el-button>
          </router-link>
          <router-link :to="{ name: '集体审核详情', query: { id: scope.row.landId } }">
            <el-button size="small" type="primary">审核详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination @current-change="changePage" :page-size="listQuery.size" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import { getList,findDetailByDictionaryType,getLandAuditStatus } from "@/api/project/fksqtc/groupApplyCheck";
import axios from "axios";

export default {
  filters: {},
  data() {
    return {
      list: null,
      total: null,
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        applicantName: null,
        applicantNum: null,
        certificateTypeId: null,
        landAuditStatus: null
      },
      shenChaList:[], //审查类型列表
      fukenList:[], //证件类型列表
    };
  },
  created() {
    this.getShenChaList()
    this.getFukenType()
  },
  methods: {
    //获取复垦类型列表
    getFukenType(){
      var data={
        dictionaryType:'CERTIFICATE_TYPE'
      }
      findDetailByDictionaryType(data).then(res=>{
        console.log(res,"证件列表")
        this.fukenList=res.data
      })
    },
    //获取审查状态列表
    getShenChaList(){
      var data={}
      getLandAuditStatus(data).then(res=>{
        console.log(res,"审查状态")
        this.shenChaList=res.data
        this.listQuery.landAuditStatus = res.data[0].code
        this.fetchData();
      })
    },
    fetchData() {
      this.listLoading = true;
      getList(this.listQuery)
        .then(res => {
          this.listLoading = false;
          this.list = res.data.rows;
          this.total = res.data.total;
        })
        .catch(err => {
          this.listLoading = false;
        });
    },
    changePage(page) {
      this.listQuery.page = page;
      this.fetchData();
    }
  }
};
</script>
